<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>案例</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=dwBGKxFV3RbxbzpO3CR4ofNkc5a69LzN"></script>
    <style>
        
        #allmap{
            height: 500px;
        }
        #content{
            position: absolute;
        }
        #search{
            position: absolute;
            left: 0;
            top: 0;
            border: 1px solid #ccc;
            z-index: 1;
            height: 20px; 
        }
        #btn{
            position: absolute;
            left: 160px;
            z-index: 1;
            width: 50px;
        }
        #list{
            list-style: none;
            width: 200px;
            position: absolute;
            top: 10px;
            left: 0px;
            z-index: 1;
        }
        li{
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div id="content">
        <input type="text" id="search">
        <button id="btn">搜索</button>
        <ul id="list">
            
        </ul>
    </div>
    <div id="allmap"></div>



</body>
<script src="../lib/jquery/jquery-3.2.1.min.js"></script>
<script>
    var timer = null;
    //输入监听，每输入一次重新搜索
    $('#search').on('keyup',function(){
      console.log($(this).val());
       var val = $(this).val();
       if(val){         
           //重复触发某类事件，需要函数节流  
           if(timer) clearTimeout(timer);
           timer = setTimeout(function(){
            $.ajax({
               type:'get',
               url:'http://web-bg.wanhutong.com/a/wht/cust/map/6',
               data:{
                   keyword:val
               },
               dataType:'json', 
               success:function(result){
                   console.log(val);
                   var str = '';
                   console.log(result);

                   result.data.slice(0,10).forEach(element => {
                       if(element.latitude && element.longitude){
                        str += `<li lon=${element.longitude} lat=${element.latitude}>${element.name}</li>` 
                       }                    
                   });                   
                   $('#list').show().append(str);

               }
           })
           },1000) 
        
       }else{//当input值为空时，把之前结果的Ul  list隐藏
           $('#list').hide();
       }        
    })


    var map = new BMap.Map("allmap");    // 创建Map实例
    var point = new BMap.Point(116.404, 39.915);
	map.centerAndZoom(point, 15);
	var marker = new BMap.Marker(point);  // 创建标注
	map.addOverlay(marker);               // 将标注添加到地图中
	marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

    //点击每个li
    $('#list').on('click','li',function(){
        //清除覆盖物
        map.clearOverlays();
        console.log(this,$(this).attr('lon'),$(this).attr('lat'));
        var lon = JSON.parse($(this).attr('lon'));
        var lat = JSON.parse($(this).attr('lat'));
        var point = new BMap.Point(lon,lat);
        map.centerAndZoom(point, 15);
        var marker = new BMap.Marker(point);  // 创建标注
        map.addOverlay(marker);               // 将标注添加到地图中
        marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

    })


    //搜索
    $('#btn').on('click',function(){
        $('#list').hide();
        $.ajax({
            type:'get',
            url:'http://web-bg.wanhutong.com/a/wht/cust/map/6',
            data:{
                keyword:$('#search').val(),
            },
            dataType:'json',
            success:function(result){
               console.log(result);
               //自定义函数，创建标注
               function addMarker(point){
                   var marker = new BMap.Marker(point);
                   map.addOverlay(marker);
               }


               
               result.data.slice(1,10).forEach(element=>{
                   var lon = element.longitude;
                   var lat = element.latitude;
                   if( lon && lat){
                        var point = new BMap.Point(lon,lat);
                        addMarker(point);   
                   }
                              
               })

               


            }

        })
    })
  

   
</script>

</html>